<template>
  <!-- 效果测试 加一个bigBox类 -->
  <view class="bigBox">
    <view class="underwayContainer">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                目前看来不算严重，但是尽快治疗，不能拖延，平时饮食清淡，多休息，不要抽烟喝酒。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                现在/严-重/不/算，但是/快/治疗，托/不要，平-时/吃/淡/多/休息，抽烟/喝酒/不要。
              </view>
            </view>
          </view>
          <view class="auditStatus-fail">审核未通过</view>
        </view>
        <view class="rightContainer">
          <view class="recordAgain" @tap="tovideoSample">
            <view>重新录制</view>
          </view>
        </view>
      </view>
    </view>
    <view class="underwayContainer">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                你的手语打得太快了，我看不懂。你能慢点吗？
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                你/手语/快，我/看/糊涂，手语/慢/可以？
              </view>
            </view>
          </view>
          <view class="auditStatus-primary">待审核</view>
        </view>
      </view>
    </view>
    <view class="underwayContainer">
      <view class="topContainer">
        <view></view>
        <view></view>
        <view></view>
      </view>
      <view class="centerContainer">
        <view class="leftContainer">
          <view class="showContainer">
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                一食堂的饭菜好吃，但是比较贵；二食堂比较便宜，但是有点远。
              </view>
            </view>
            <view class="lineContent">
              <view class="dot"></view>
              <view class="wordContent">
                第一/食-堂/菜/好吃，缺/钱/贵，第二/食-堂/便宜，缺/走/远。
              </view>
            </view>
          </view>
          <view class="auditStatus-success">审核通过</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.show = true;
    },
    handleClose() {
      this.show = false;
    },
    tovideoSample() {
      uni.reLaunch({
        url: "../videoSample/videoSample?id=0",
      });
    },
  },
};
</script>

<style lang="less">
.bigBox {
  .underwayContainer {
    margin: 3% 5%;
    height: 210rpx;
    box-shadow: 4rpx 4rpx 4rpx 2rpx rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    border-radius: 20rpx;
    .topContainer {
      background-color: rgba(197, 208, 214, 1);
      height: 40rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      > view {
        margin-right: 10rpx;
        background-color: rgb(255, 255, 255);
        height: 15rpx;
        width: 15rpx;
        border-radius: 50%;
      }
    }
    .centerContainer {
      display: flex;
      .leftContainer {
        display: flex;
        flex-direction: column;
        flex: 3;
        padding: 3%;
        width: 200rpx;
        .showContainer {
          display: flex;
          flex-direction: column;
          flex: 4;
          .lineContent {
            display: flex;
            align-items: center;
            .dot {
              margin-right: 10rpx;
              background: radial-gradient(
                rgba(255, 255, 255, 1),
                rgba(197, 208, 214, 0.4),
                rgba(197, 208, 214, 0.8)
              );
              height: 20rpx;
              width: 20rpx;
              border-radius: 50%;
            }
            .wordContent {
              font-weight: bold;
              font-size: 28rpx;
              color: #333;
              width: 460rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .auditStatus-fail {
          width: fit-content;
          border-radius: 16rpx;
          padding: 2%;
          font-size: 24rpx;
          letter-spacing: 1px;
          background-color: rgba(197, 208, 214, 1);
          color: rgba(255, 255, 255, 1);
          margin-top: 4rpx;
          font-weight: bold;
        }
        .auditStatus-primary {
          width: fit-content;
          border-radius: 16rpx;
          padding: 2%;
          font-size: 24rpx;
          letter-spacing: 1px;
          color: rgba(197, 208, 214, 1);
          background-color: rgba(255, 255, 255, 1);
          border: solid 1px rgba(197, 208, 214, 1);
          margin-top: 4rpx;
          font-weight: bold;
        }
        .auditStatus-success {
          width: fit-content;
          border-radius: 16rpx;
          padding: 2%;
          font-size: 24rpx;
          letter-spacing: 1px;
          background-color: rgba(255, 255, 255, 1);
          color: rgba(136, 3, 30, 0.8);
          border: solid 1px rgba(136, 3, 30, 1);
          margin-top: 4rpx;
          font-weight: bold;
        }
      }
      .rightContainer {
        display: flex;
        flex: 1;
        align-items: flex-end;
        justify-content: center;
        .recordAgain {
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(136, 3, 30, 0.8);
          width: 80%;
          height: 50%;
          font-size: 26rpx;
        }
        // 仅限学习模式
        // .similarity {
        //   display: flex;
        //   align-items: center;
        //   justify-content: center;
        //   flex-direction: column;
        //   width: 80%;
        //   height: 60%;
        //   color: rgba(189, 195, 199, 1);
        //   font-weight: bold;
        //   .similarIdx {
        //     font-size: 42rpx;
        //   }
        // }
      }
    }
  }
}
</style>
